import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import basketSel from '@assets/tab-bar/basket-sel.png'
import './index.scss'
import { parsePrice } from '@utils/utils'

export default class MoreProd extends Taro.Component {
    static defaultProps = {
        list: []
    }
    prodList(prod) {
        return (
            <View className='show-item'>
                <View className='more-prod-pic'>
                    <Image src={prod.pic} className='more-pic' />
                </View>
                <View className='prod-text-right'>
                    <View className='prod-text more'>{prod.prodName}</View>
                    <View className='prod-info'>{prod.brief}</View>
                    <View className='b-cart'>
                        <View className='price'>
                            <Text className='symbol'>￥</Text>
                            <Text className='big-num'>{parsePrice(prod.price)[0]}</Text>
                            <Text className='small-num'>.{parsePrice(prod.price)[1]}</Text>
                        </View>
                        <View>
                            <Image src={basketSel} className='basket-img' />
                        </View>
                    </View>
                </View>
            </View>
        )
    }

    tagList(item) {
        const { title, prods } = item
        const prod = (prods || []).map(prod => {
            return this.prodList(prod)
        })
        return (
            <View>
                <Text className='title'>{title}</Text>
                <View className='prod-show'>
                    {
                        prod
                    }
                </View>
            </View>
        )
    }

    render() {
        const { list } = this.props
        return (
            <View className='more-prod'>
                {
                    this.tagList(list)
                }
            </View>
        )
    }
}